<!-- 后台首页 -->
<template>
    <main class="container p-4">
        <!-- grid 表格布局，分为 4 列 -->
        <div class="grid grid-cols-4 gap-7">
            <!-- 文章数 -->
            <div class="col-span-4 md:col-span-1">
                <!-- 卡片 -->
                <div
                    class="flex items-center w-full h-full px-5 py-7 mb-3 bg-white border border-gray-200 rounded-lg dark:bg-stone-950 dark:border-gray-700">
                    <div class="w-2/5">
                        <svg-icon name="article" class="w-10 h-10 icon" />
                    </div>
                    <div class="ml-5 w-3/5">
                        <h2 class="mb-1 dark:text-white">文章</h2>
                        <CountTo :value="articlePublishCount" customClass="font-bold text-2xl" class="dark:text-white"
                            :class="[articlePublishCount > 999 ? (articlePublishCount > 9999 ? (articlePublishCount > 99999 ? 'text-xs' : 'text-sm') : 'text-base') : '']">
                        </CountTo>
                        ----
                        <CountTo :value="articleTotalCount" customClass="font-bold text-2xl" class="dark:text-white"
                            :class="[articleTotalCount > 999 ? (articleTotalCount > 9999 ? (articleTotalCount > 99999 ? 'text-xs' : 'text-sm') : 'text-base') : '']">
                        </CountTo>
                    </div>
                </div>
            </div>

            <!-- 分类数 -->
            <div class="col-span-4 md:col-span-1">
                <!-- 卡片 -->
                <div
                    class="flex items-center w-full h-full px-5 py-7 mb-3 bg-white border border-gray-200 rounded-lg dark:bg-stone-950 dark:border-gray-700">
                    <div class="w-2/5">
                        <svg-icon name="admin-category" class="icon w-10 h-10"></svg-icon>
                    </div>
                    <div class="ml-5 w-3/5">
                        <h2 class="mb-1 dark:text-white">分类</h2>
                        <CountTo :value="categoryTotalCount" customClass="font-bold text-2xl" class="dark:text-white"
                            :class="[categoryTotalCount > 999 ? (categoryTotalCount > 9999 ? (categoryTotalCount > 99999 ? 'text-xs' : 'text-sm') : 'text-base') : '']">
                        </CountTo>
                    </div>
                </div>
            </div>

            <!-- 标签数 -->
            <div class="col-span-4 md:col-span-1">
                <!-- 卡片 -->
                <div
                    class="flex items-center w-full h-full px-5 py-7 mb-3 bg-white border border-gray-200 rounded-lg dark:bg-stone-950 dark:border-gray-700">
                    <div class="w-2/5">
                        <svg-icon name="tag" class="icon w-10 h-10"></svg-icon>
                    </div>
                    <div class="ml-5 w-3/5">
                        <h2 class="mb-1 dark:text-white">标签</h2>
                        <CountTo :value="tagTotalCount" customClass="font-bold text-2xl" class="dark:text-white"
                            :class="[tagTotalCount > 999 ? (tagTotalCount > 9999 ? (tagTotalCount > 99999 ? 'text-xs' : 'text-sm') : 'text-base') : '']">
                        </CountTo>
                    </div>
                </div>
            </div>

            <!-- 总浏览量 -->
            <div class="col-span-4 md:col-span-1">
                <!-- 卡片 -->
                <div
                    class="flex items-center w-full h-full px-5 py-7 mb-3 bg-white border border-gray-200 rounded-lg dark:bg-stone-950 dark:border-gray-700">
                    <div class="w-2/5">
                        <svg-icon name="pvCount" class="icon w-10 h-10"></svg-icon>
                    </div>
                    <div class="ml-5 w-3/5">
                        <h2 class="mb-1 dark:text-white">总浏览量</h2>
                        <CountTo :value="pvTotalCount" customClass="font-bold text-2xl" class="dark:text-white"
                            :class="[pvTotalCount > 999 ? (pvTotalCount > 9999 ? (pvTotalCount > 99999 ? 'text-xs' : 'text-sm') : 'text-base') : '']">
                        </CountTo>
                    </div>
                </div>
            </div>

            <!-- 文章发布热点图 -->
            <div class="col-span-4 md:col-span-2">
                <!-- 卡片 -->
                <div
                    class="w-full h-full px-5 py-7 mb-3 bg-white border border-gray-200 rounded-lg dark:bg-stone-950 dark:border-gray-700">
                    <h2 class="flex items-center mb-2 font-bold text-gray-600 uppercase dark:text-white">
                        <!-- 日历图标 -->
                        <svg-icon name="calendar-admin" class="icon w-5 h-5 mr-2" height="200"></svg-icon>
                        近6个月文章发布热点图
                    </h2>
                    <!-- 内容 -->
                    <div>
                        <ArticlePublishCalendar :value="articlePublishInfo"></ArticlePublishCalendar>
                    </div>
                </div>
            </div>

            <!-- 文章日 PV 访问量折线图 -->
            <div class="col-span-4 md:col-span-2">
                <!-- 卡片 -->
                <div
                    class="w-full h-full px-5 py-7 mb-3 bg-white border border-gray-200 rounded-lg dark:bg-stone-950 dark:border-gray-700">
                    <h2 class="flex items-center mb-2 font-bold text-gray-600 uppercase dark:text-white">
                        <!-- 折线图标 -->
                        <svg-icon name="PV-admin" class="icon w-5 h-5 mr-2" height="200"></svg-icon>

                        近一周 PV 访问量
                    </h2>
                    <ArticlePVLineChat :value="articlePVInfo"></ArticlePVLineChat>
                </div>
            </div>
        </div>

    </main>
</template>


<script setup>
import { ref } from 'vue'
import { getBaseStatisticsInfo, getPublishArticleStatisticsInfo, getArticlePVStatisticsInfo } from '@/api/admin/dashboard'
import CountTo from '@/components/CountTo.vue'
import ArticlePublishCalendar from '@/components/ArticlePublishCalendar.vue'
import ArticlePVLineChat from '@/components/ArticleLineChat.vue'

const articlePublishCount = ref(0)
// 文章总数，默认值为 0
const articleTotalCount = ref(0)
// 分类总数
const categoryTotalCount = ref(0)
// 标签总数
const tagTotalCount = ref(0)
// PV 总访问量
const pvTotalCount = ref(0)

getBaseStatisticsInfo().then(res => {
    if (res.success) {
        articlePublishCount.value = res.data.articlePublishCount
        articleTotalCount.value = res.data.articleTotalCount
        categoryTotalCount.value = res.data.categoryTotalCount
        tagTotalCount.value = res.data.tagTotalCount
        pvTotalCount.value = res.data.pvTotalCount

    }
})


// 按日统计文章发布数据
const articlePublishInfo = ref({})
getPublishArticleStatisticsInfo().then((res) => {
    if (res.success) {
        articlePublishInfo.value = res.data
    }
})

// 近一周文章 PV 数据
const articlePVInfo = ref({})
getArticlePVStatisticsInfo().then((res) => {
    if (res.success && res.data != null) {
        articlePVInfo.value = res.data
    }
})
</script>